import React ,{Component} from 'react';
import './stars.css';
import $ from 'jquery';
let recodes = 0;
const handleStar = (e,key) =>{
  if($('.li-star').length===1&&$('.li-star').length===key){
    $('.starts_1 ul li img').attr('src',require('./../../images/icon/star.png'));
    $('.li-star').removeClass('li-star');
  }else{
    $('.starts_1 ul li img').attr('src',require('./../../images/icon/star.png'));
    $('.li-star').removeClass('li-star')
  for(let i=0;i<key;i++){
    $('.starts_1 ul li img')[i].setAttribute("src",require('./../../images/icon/star_on.png'));
    $('.starts_1 ul li img')[i].setAttribute("class",'li-star');
  }
  }
  recodes = $('.li-star').length;
  $('.starts_1 .starts_1_recode').html(recodes)
}
// const handleStarRecode = () =>{
//   return $('.li-star').length
// }
class myCard extends Component {
  render(){
    return ( 
      <div className='starts_1'>
         <ul>
           <li onClick={(e)=>{handleStar(e,1)}}><img src={require('./../../images/icon/star.png')} alt='加载失败' /></li>
           <li onClick={(e)=>{handleStar(e,2)}}><img src={require('./../../images/icon/star.png')} alt='加载失败' /></li>
           <li onClick={(e)=>{handleStar(e,3)}}><img src={require('./../../images/icon/star.png')} alt='加载失败' /></li>
           <li onClick={(e)=>{handleStar(e,4)}}><img src={require('./../../images/icon/star.png')} alt='加载失败' /></li>
           <li onClick={(e)=>{handleStar(e,5)}}><img src={require('./../../images/icon/star.png')} alt='加载失败' /></li>
         </ul>
         <div className='starts_1_recode'>0</div>
         <a href={'topic'} className='starts_1_number'>{'5774人评价'}</a>
      </div>
      )
  }
}
export default myCard

